<template>
  <div class="step">
    inCurrent1: {{inCurrent1}}
    inCurrent2: {{inCurrent2}}
    inCurrent3: {{inCurrent3}}
    hasAlipay: {{hasAlipay}}
    <!-- 有支付宝账户 -->
    <div v-if="hasAlipay === 1">
      <a-steps :current="inCurrent1" size="small">
        <a-step title="基本信息" />
        <a-step title="经营信息" />
        <a-step title="扫码授权" />
        <a-step title="等待审核" />
      </a-steps>
    </div>
    <!-- 无支付宝账户 -->
    <div v-if="hasAlipay === 2">
      <a-steps :current="inCurrent2" size="small">
        <a-step title="基本信息" />
        <a-step title="经营信息" />
        <a-step title="等待审核" />
      </a-steps>
    </div>
    <!-- 微信账户 -->
    <div v-if="hasAlipay === 3">
      <a-steps :current="inCurrent3" size="small">
        <a-step title="基本信息" />
        <a-step title="经营信息" />
        <a-step title="等待审核" />
      </a-steps>
    </div>
    <div style="margin-top:20px">
      <a-divider />
    </div>
    <!-- 支付宝有账户步骤1 -->
    <div v-if="hasAlipay === 1 && inCurrent1 === 0">
      <a-row>
        <a-col span="12">
          <!-- 有支付状态 -->
          <div>
            <div class="name">账户信息</div>
            <div style="margin-bottom:180px;">
              <span>支付宝账号:</span> 
              <a-input class="common-w" placeholder="请输入企业支付宝账号" />
            </div>
          </div>
        </a-col>
        <a-col span="12">
          <div class="name">联系人信息</div>
          <div>
            <span>姓名:</span> 
            <a-input class="common-w" placeholder="请输入联系人姓名" />
          </div>
          <div>
            <span style="margin: 25px 0">电子邮箱:</span> 
            <a-input class="common-w" placeholder="请输入联系人电子邮箱" />
          </div>
          <div>
            <span>手机号码:</span> 
            <a-input class="common-w" placeholder="请输入联系人手机号码" />
          </div>
        </a-col>
      </a-row>
      <a-row v-if="hasAlipay === 2">
        <a-col span="12">
          <div class="name" style="margin-top:0;">银行账户</div>
          <div>
            <span style="width:100px;">支付宝账号:</span> 
            <a-select 
              placeholder="请选择开户银行"
              style="width: 220px;margin-left:15px;" 
              @change="handleChange"
            >
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="disabled" disabled>Disabled</a-select-option>
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
          </div>
          <div>
            <span style="width:100px;margin-top:15px;">企业对公账户:</span> 
            <a-input class="common-w" placeholder="不只支持信用卡和存折进行认证" />
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 支付宝无账户步骤1 -->
    <div v-if="hasAlipay === 2 && inCurrent2 === 0">
      <a-row>
        <a-col span="12">
          <!-- 无支付宝状态步骤 -->
          <div class="un-user">
            <div class="name">账户信息</div>
            <div>
              <span style="width:90px">支付宝账户名:</span> 
              <a-input class="common-w" placeholder="请输入作为企业支付宝的账户名" />
            </div>
            <div class="tip">签约成功将作为商家企业支付宝账号</div>
            <div style="margin-top:15px;">
              <span>法人身份证:</span>
              <span style="margin-left:20px">个人信息页</span>
              <span>国徽页</span>
              <a-upload
                action="//jsonplaceholder.typicode.com/posts/"
                listType="picture-card"
                @preview="handlePreview"
                :fileList="fileList"
                @change="handleChange"
                style="width:100%;margin:5px 0 0 105px;"
              >
                <div v-if="fileList.length < 2">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">点击上传</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </div>
        </a-col>
        <a-col span="12">
          <div class="name">联系人信息</div>
          <div>
            <span>姓名:</span> 
            <a-input class="common-w" placeholder="请输入联系人姓名" />
          </div>
          <div>
            <span style="margin: 25px 0">电子邮箱:</span> 
            <a-input class="common-w" placeholder="请输入联系人电子邮箱" />
          </div>
          <div>
            <span>手机号码:</span> 
            <a-input class="common-w" placeholder="请输入联系人手机号码" />
          </div>
        </a-col>
      </a-row>
      <a-row v-if="hasAlipay === 2">
        <a-col span="12">
          <div class="name" style="margin-top:0;">银行账户</div>
          <div>
            <span style="width:100px;">支付宝账号:</span> 
            <a-select 
              placeholder="请选择开户银行"
              style="width: 220px;margin-left:15px;" 
              @change="handleChange"
            >
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="disabled" disabled>Disabled</a-select-option>
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
          </div>
          <div>
            <span style="width:100px;margin-top:15px;">企业对公账户:</span> 
            <a-input class="common-w" placeholder="不只支持信用卡和存折进行认证" />
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 支付宝有账户步骤2 -->
    <div v-if="hasAlipay === 1 && inCurrent1 === 1">
      <!-- 有支付状态 -->
      <div>
        <span class="name">经营信息</span>
        <!-- 营业执照 -->
        <div>
          <span>营业执照:</span>
          <a-upload
            action="//jsonplaceholder.typicode.com/posts/"
            listType="picture-card"
            @preview="handlePreview"
            :fileList="fileList"
            @change="handleChange"
            style="width:100%;margin:-28px 0 0 105px;"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">点击上传</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
        <!-- 店铺招牌 -->
        <div style="margin-top:20px;">
          <span>店铺招牌:</span>
          <a-upload
            action="//jsonplaceholder.typicode.com/posts/"
            listType="picture-card"
            @preview="handlePreview"
            :fileList="fileList"
            @change="handleChange"
            style="width:100%;margin:-28px 0 0 105px;"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">点击上传</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
          <div class="store-tip">上传 1 张店铺招牌照片，需清晰展示完整的招牌</div>
        </div>
      </div>
    </div>
    <!-- 支付宝无账户步骤2 -->
    <div v-if="hasAlipay === 2 && inCurrent2 === 1">
      <span class="name">经营信息</span>
      <!-- 营业执照 -->
      <div>
        <span>营业执照:</span>
        <a-upload
          action="//jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          @preview="handlePreview"
          :fileList="fileList"
          @change="handleChange"
          style="width:100%;margin:-28px 0 0 105px;"
        >
          <div v-if="fileList.length < 1">
            <a-icon type="plus" />
            <div class="ant-upload-text">点击上传</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
      <!-- 无支付状态 -->
      <div>
        <a-row style="margin-top:15px;">
          <a-col span="11">
            <span>店铺招牌:</span>
            <a-upload
              action="//jsonplaceholder.typicode.com/posts/"
              listType="picture-card"
              @preview="handlePreview"
              :fileList="fileList"
              @change="handleChange"
              style="width:100%;margin:-28px 0 0 105px;"
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">点击上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
            <div class="store-tip">上传1张店铺招牌照片，需清晰展示完整的招牌</div>
          </a-col>
          <a-col span="13">
            <span>店铺内景:</span>
            <a-upload
              action="//jsonplaceholder.typicode.com/posts/"
              listType="picture-card"
              @preview="handlePreview"
              :fileList="fileList"
              @change="handleChange"
              style="width:100%;margin:-28px 0 0 105px;"
            >
              <div v-if="fileList.length < 3">
                <a-icon type="plus" />
                <div class="ant-upload-text">点击上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
            <div class="store-tip">上传3张店铺招牌照片，需清晰展示完整的招牌</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 支付宝有账户步骤3 -->
    <div v-if="inCurrent1 === 2 && hasAlipay === 1">
      <div class="step3">
        <img src="../../../../assets/imgs/timg1.jpg" alt="">
        <div>您即将完成申请开通支付宝当面付</div>
        <div class="tip">请使用企业支付宝扫描上方二维码并授权</div>
      </div>
    </div>
    <!-- 支付宝无账户步骤3 -->
    <div v-if="inCurrent2 === 2 && hasAlipay === 2">
      <div class="step3">
        <img src="../../../../assets/imgs/timg1.jpg" alt="">
        <div>您已成功申请开通 <span class="yr" style="width: 86px;">支付宝当面付</span> 服务</div>
        <div class="tip">将在<span class="yr">1-3个工作日</span> 内审核完成，结果以电子邮件形式通知您</div>
        <a-divider style="margin:15px 0;" />
        <a-radio>同时申请开通支付宝预授权服务</a-radio>
        <div style="margin-top:15px;">
          <a-button type="primary">完成</a-button>
        </div>
      </div>
    </div>
    <!-- 支付宝有账户步骤4 -->
    <div v-if="inCurrent1 === 3 && hasAlipay === 1">
       <div v-if="hasAlipay === 1" class="step3">
        <img src="../../../../assets/imgs/timg1.jpg" alt="">
        <div>您已成功申请开通 <span class="yr" style="width: 86px;">支付宝当面付</span> 服务</div>
        <div class="tip">将在<span class="yr">1-3个工作日</span> 内审核完成，结果以电子邮件形式通知您</div>
        <a-divider style="margin:15px 0;" />
        <a-radio>同时申请开通支付宝预授权服务</a-radio>
        <div style="margin-top:15px;">
          <a-button type="primary">完成</a-button>
        </div>
      </div>
    </div>


    <!-- 微信步骤1 -->
    <div v-if="hasAlipay === 3 && inCurrent3 === 0">
      <div class="step3-tip">您即将开通<span class="yr">微信普通支付</span>服务，请按提示进行操作。官方费率为<span class="yr">0.6%</span>（我们将与对接酒店的BD核实具体费率）</div>
      <a-row>
        <a-col span="12">
          <div class="name">银行账户</div>
          <div>
            <span style="width:100px;">开户银行:</span> 
            <a-select 
              placeholder="请选择开户银行"
              style="width: 220px;margin-left:15px;" 
              @change="handleChange"
            >
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="disabled" disabled>Disabled</a-select-option>
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
          </div>
          <div>
            <span style="width:100px;margin-top:15px;">企业对公账户:</span> 
            <a-input class="common-w" placeholder="不只支持信用卡和存折进行认证" />
          </div>
        </a-col>
        <a-col span="12">
          <div class="name">联系人信息</div>
          <div>
            <span>姓名:</span> 
            <a-input class="common-w" placeholder="请输入联系人姓名" />
          </div>
          <div>
            <span style="margin: 25px 0">电子邮箱:</span> 
            <a-input class="common-w" placeholder="请输入联系人电子邮箱" />
          </div>
          <div>
            <span>手机号码:</span> 
            <a-input class="common-w" placeholder="请输入联系人手机号码" />
          </div>
        </a-col>
      </a-row>
    </div>

     <!-- 微信步骤2 -->
    <div v-if="hasAlipay === 3 && inCurrent3 === 1">
      <div>
        <span class="name">经营信息</span>
        <!-- 营业执照 -->
        <div>
          <span>营业执照:</span>
          <a-upload
            action="//jsonplaceholder.typicode.com/posts/"
            listType="picture-card"
            @preview="handlePreview"
            :fileList="fileList"
            @change="handleChange"
            style="width:100%;margin:-28px 0 0 105px;"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">点击上传</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
        
      </div>
    </div>

    <!-- 微信步骤3 -->
    <div v-if="hasAlipay === 3 && inCurrent3 === 2">
       <div class="step3">
        <img src="../../../../assets/imgs/timg1.jpg" alt="">
        <div>您已成功申请开通<span class="yr">微信普通支付</span>服务</div>
        <div class="tip">将在<span class="yr">1-3个工作日</span>内审核完成，结果以电子邮件形式通知您</div>
        <a-divider style="margin:15px 0;" />
        <a-radio>同时申请开通支付宝预授权服务</a-radio>
        <div style="margin-top:15px;">
          <a-button type="primary">完成</a-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    hasAlipay: {
      type: Number,
      default: 2
    },
    inCurrent1: {
      type: Number,
      default: 0
    },
    inCurrent2: {
      type: Number,
      default: 0
    },
    inCurrent3: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      // fileList: [{
      //   uid: '-1',
      //   name: 'xxx.png',
      //   status: 'done',
      //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      // }],
      fileList: [],
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
  },
}
</script>
<style lang="less" scoped>
 .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
.step {
}
.name {
  border-left: 3px solid #358CF0;
  padding-left: 5px;
  margin: 21px 0 25px 0;
  box-sizing: border-box;
}
.un-user {
  .tip {
    padding-left: 105px;
    font-size: 12px;
    color: #999999;
  }
}
.common-w {
  width:220px;
  margin-left:15px;
}
span {
  display: inline-block;
  width: 80px;
  text-align: right;
  color: #333333;
}
.store-tip {
  color: #999999;
  font-size: 12px;
  margin-left: 105px;
}
.step3 {
  text-align:center;
  img {
    margin: 55px 0 35px 0;
    width: 170px;
    height: 170px;
  }
  .tip {
    color: #333333;
    margin-top: 10px;
  }
}
.step3-tip {
  color: #666666;
  text-align: center;
  margin-top: 25px;
}
.yr {
  color: #F6772D;
  width: auto;
}
</style>